<template>
  <zb-login-bindmobile v-if="loginType == 3" />
  <div v-if="loginType == 1 || loginType == 2" class="login">
    <!-- <div class="change" v-if="loginType == 1 || loginType ==2" @click="loginTypeFun(loginType == 1 ? 2 : 1)">
      <img v-if="loginType == 1" src="@/assets/images/login-wx.svg" class="login-wx" alt="" />
      <img v-else src="@/assets/images/login-ph.svg" class="login-ph" alt="" />
    </div> -->
    <div class="flex items-center justify-center w-100 login-content relative" :class="`login-type-${loginType}`">
      <el-form ref="formRef" :model="formData" label-width="0" :rules="formRules" class="w-100">
        <div class="title"><img :src="htmlShowData.logo" class="logo wap" alt="">欢迎登录</div>
        <el-form-item label="" prop="mobile" class="mobile-box">
          <div class="num">+86</div>
          <el-input v-model="formData.mobile" placeholder="请输入手机号" size="large" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="" prop="captcha" class="code-box">
          <el-input ref="codeInputRef" v-model="formData.captcha" type="text" placeholder="请输入验证码" size="large"></el-input>
          <div class="code" @click="sendMsg">{{codetxt}}</div>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" class="submit-btn" @click="submit" size="large" :disabled="!formData.mobile || !formData.captcha || !agree && loginType == 1">账号登录</el-button>
          <div v-if="loginType == 1" class="form-tips">
            <el-checkbox v-model="agree">已阅读并同意{{sitename}}的</el-checkbox>
            <span class="k" @click="htmlShowFun(1)">服务协议</span>和<span class="k" @click="htmlShowFun(2)">隐私政策</span>
          </div>
        </el-form-item>
      </el-form>
      <div v-show="loginType == 2" class="login-wx-box">
        <div class="title"><img src="@/assets/images/login-wx-icon.svg" class="login-wx-icon" alt="">扫码登录</div>
        <div class="wx-img" @click="loginTypeFun(3)"><img src="@/assets/images/login-wx-icon.svg" alt=""></div>
        <div class="tip">打开微信app—右上角加号—点击扫一扫</div>
      </div>
      
    </div>
  </div>
  <el-dialog :append-to-body="true" v-model="htmlShowData.show" :title="htmlShowData.title" width="600" @closed="htmlShowData.show = false" class="abc">
    <div class="html-box">
      <el-scrollbar height="100%">
        <div v-html="htmlShowData.con" class="html"></div>
      </el-scrollbar>
    </div>
  </el-dialog>
  
</template>

<script lang="ts" setup>
import { mobileloginApi, smsSendApi, getConfig } from '@/api/app';
import { useAppStore } from '@/stores/app'
import { useUserStore } from '@/stores/user'
import { ref, computed, reactive } from 'vue';
import { isMobile } from '@/utils/util';
import { loginOk } from '@/utils/weChat'

const appStore = useAppStore()
const userStore = useUserStore();
const sitename = ref()
const getConfigFun = () =>{
  getConfig().then(res=>{
    sitename.value = res.sitename;
    htmlShowData.Privacy = res.Privacy || '';
    htmlShowData.Policy = res.Policy || '';
    htmlShowData.logo = res.logo1;
  })
}
getConfigFun()
// 隐私协议弹窗
const htmlShowData = reactive({
  title:'',
  con:'',
  Privacy:'',
  Policy:'',
  show:false,
  logo:''
})
const htmlShowFun = (e:number) =>{
  console.log('htmlShowFun--', e)
  htmlShowData.title = e == 1 ? '服务协议' : '隐私政策';
  htmlShowData.con = e == 1 ? htmlShowData.Policy : htmlShowData.Privacy;
  htmlShowData.show = true;
  
}
// 手机验证码
const codetxt = computed(()=>{
  return codeTime.value === 0 ? '获取验证码' : `${codeTime.value}s 后重新获取`
});
const loginType = ref(1); // 登陆方式 1-手机， 2-微信， 3-绑定手机号
const loginTypeFun = (e:number) =>{
  loginType.value = e;
  formData.captcha = '';
  formData.mobile = '';
}
const agree = ref(true)
const curTab = ref('two');
const formData = reactive({
    mobile: '', // 
    captcha: '',
})
const formRules = {
  mobile: [
    { required: true, message: '请输入账号', trigger: ['change', 'blur'] }
  ],
  captcha: [
    { required: true, message: '请输入验证码', trigger: ['change', 'blur'] }
  ],
}
const codeRun = ref()
const codeTime = ref(0);
const codeInputRef = ref()
const sendMsg = () => {
  
  const regex = /^1[2-9]\d{9}$/;
  if(!formData.mobile) return ElMessage.error('请输入手机号');
  if(!regex.test(formData.mobile)) return ElMessage.error('手机号格式不正确');
  if(!agree.value) return ElMessage.error(`请先阅读并同意${sitename.value}的服务协议和隐私政策`);
  if (codeInputRef.value) {
    (codeInputRef.value.$el as HTMLElement).querySelector('input')?.focus();
  }
  smsSendApi({mobile: formData.mobile, event:'mobilelogin'}).then(res=>{
    codeTime.value = 60
    codeRun.value = setInterval(()=>{
      codeTime.value--;
      if(codeTime.value == 0){
        clearInterval(codeRun.value)
      }
    }, 1000)
  })
}
const formRef = ref()
// 登录提交
const emits = defineEmits(['confirm'])
const submit = async () => {
  await formRef.value?.validate();
  const res = await mobileloginApi(formData)
  console.log(res)
  if(res){
    clearInterval(codeRun.value);
    if(res.userinfo.mobile){
      loginOk(res.userinfo)
      userStore.login(res.userinfo.token);
      userStore.setUser(res.userinfo); // 存储用户信息
      ElMessage.success('登录成功~');
      return;
    }
    if(!isMobile){
      if(!res.userinfo.mobile){
        loginType.value = 3;
      }else{
        emits('confirm'); // 判断简历是否需要完善
      }
    }
  }
}
</script>

<style lang="scss" scoped>
 @import '@/assets/styles/login.scss'; // 确保路径正确
</style>